<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
      <a-modal  title="地图选点" :visible="visible" @ok="handleOk" @cancel="handleCancel" width="800px" >
        <div class="search-box">
          <a-input-search v-model="keyword" placeholder="输入地址搜索"  @search="handleSearch" />
        </div>
        <div id="map-container" style="height: 500px;"></div>
           <div >
              名称：<font color='blue'>{{address.name}} </font> 地址：<font color='blue'>{{address.address}}</font> 经度：<font color='blue'>{{address.lonlat}} </font>
          </div>
      </a-modal>
  </j-modal>
</template>
<script>
window._AMapSecurityConfig = { securityJsCode: "c5623422a991c2e45e18acb944d3efc2", };
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  data() {
    return {
      title:'',
      width:800,
      visible: false,
      disableSubmit: false,
      keyword: '',
      map: null,
      geocoder: null,
      marker: null,
      selectedLngLat: {},
      selectedAddress: '',
      address:{
        name:'',
        address:'',
        lonlat:''
      }
    };
  },
  methods: {
    show(model){
      console.log("selectedPoint:",JSON.stringify(model));
      this.visible = true;
      this.initMap(model);
    },
    // 初始化地图
    initMap(model) {
      //116.397433,39.909148
      let lng = 116.397433,lat = 39.909148;
      if(model.id){
        lat = model.shopLat;
        lng = model.shopLng;
        this.$set(this.selectedLngLat,"lng",lng);
        this.$set(this.selectedLngLat,"lat",lat);
      }
      AMapLoader.load({
        key: 'a271ecbb24cc294b23ddeb44e2f3fbdb',
        version: "2.0",
        plugins: ['AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.Autocomplete'],
      }).then((AMap) => {
        let center = [lng, lat];
        this.map = new AMap.Map('map-container', { zoom: 16,center: center });
        this.geocoder = new AMap.Geocoder({ city: '全国' });
        if(model.id){
          this.addMarker(center);
          var address = {"address":model.shopAddress,"name":model.shopName,"lonlat":lng+','+lat}
          this.address = address;
        }
        // 监听地图点击事件
        this.map.on('click', (e) => {
          console.log("e:",e);
          this.selectedLngLat = e.lnglat;
          this.addMarker(e.lnglat);
          this.getAddress(e.lnglat);
        });
      });
    },
    // 添加标记
    addMarker(lnglat) {
      if (this.marker) this.map.remove(this.marker);
      this.marker = new AMap.Marker({ position: lnglat });
      this.map.add(this.marker);
      this.marker.on('click', (e) => {
          console.log("1111e:",e);
          // this.selectedLngLat = e.lnglat;
          // this.addMarker(e.lnglat);
          this.getAddress(e.lnglat);
        });
    },
    // 逆地理编码获取地址
    getAddress(lnglat) {
      this.geocoder.getAddress(lnglat, (status, result) => {
        console.log("status:", status);
        console.log("result:", result);
        if (status === 'complete') {
          this.selectedAddress = result.regeocode.formattedAddress;
          this.address = {
            name: '',
            address: this.selectedAddress,
            lonlat: `${lnglat.lng},${lnglat.lat}`,
          };
        }
      });
    },
    // 处理搜索
    handleSearch() {
      const placeSearch = new AMap.PlaceSearch({
        map: this.map,
        pageSize: 5,
      });
      placeSearch.search(this.keyword, (status, result) => {
        console.log("status:",status);
        console.log("result:",result);
        if (result.poiList.pois.length > 0) {
          const lnglat = result.poiList.pois[0].location;
          this.map.setCenter(lnglat);
          this.selectedLngLat = lnglat;
          this.addMarker(lnglat);
        }
      });
    },
    // 确认选点
    handleOk() {
      this.$emit('select', {
        lng: this.selectedLngLat.lng,
        lat: this.selectedLngLat.lat,
        address: this.selectedAddress,
      });
      this.visible = false;
      this.$emit('ok', this.address);
    },
    // 显示弹窗
    open() {
      this.visible = true;
      this.$nextTick(() => this.initMap());
    },
    handleCancel () {
      this.close()
    },
    close () {
      this.$emit('close');
      this.visible = false;
    },
  },
};
</script>